<template>
  <a-card>
    <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol"
      :wrapperCol="formItemLayout.wrapperCol">
      <a-form-item :wrapperCol="offset">
        <a-alert message="*注：监测链接暂时只支持积分商城的页面路径" banner />
      </a-form-item>

      <a-form-item label="小程序">
        <!-- 请选择小程序 -->
        <a-select v-decorator="[
          `brandId`,
          {
            rules: [
              {
                required: true,
                message: '请选择小程序',
              },
            ],
          },
        ]" placeholder="请选择小程序">
          <a-select-option v-for="item in brands" :key="item.weid" :value="item.weid">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="页面名称">
        <a-input placeholder="请输入页面名称" v-decorator="[
          `monitorLinkName`,
          {
            rules: [
              {
                required: true,
                whitespace: true,
                message: '请输入页面名称',
              },
            ],
          },
        ]"></a-input>
      </a-form-item>
      <a-form-item label="投放渠道">
        <a-input placeholder="请输入投放渠道" v-decorator="[
          `putChannel`,
          {
            rules: [
              {
                required: true,
                whitespace: true,
                message: '请输入投放渠道',
              },
            ],
          },
        ]"></a-input>
      </a-form-item>
      <a-form-item label="路径">
        <a-input placeholder="请输入路径" v-decorator="[
          `url`,
          {
            validateTrigger: ['change', 'blur'],
            rules: [
              {
                required: true,
                pattern: '^\/[a-zA-Z0-9_-]',
                whitespace: true,
                message: '请填写/开头的路径'
              }
            ]
          },
        ]"></a-input>
      </a-form-item>
      <a-form-item label="备注">
        <a-input placeholder="请输入备注" v-decorator="[`note`]"></a-input>
      </a-form-item>
      <a-form-item :wrapperCol="offset">
        <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      </a-form-item>
    </a-form>
    <launchModal :visible.sync="showModal" :launchObj="launchObj" @ok="back"/>
  </a-card>
</template>

<script>
import { brands } from '../../micromall/util/brand'
import { addChannel } from "@/api/operateTools/channel";
import  launchModal  from "./launchModal.vue"
export default {
  name: "",
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xl: { span: 8 },
          xs: { span: 12 },
          sm: { span: 12 },
        },
      },
      offset: {
        xl: { span: 8, offset: 5 },
        xs: { span: 12, offset: 5 },
        sm: { span: 12, offset: 6 },
      },
      importType: false,
      brands,
      distributor: [],
      area: [],
      loading: false,
      launchObj:null,
      showModal:false
    };
  },
  components:{
    launchModal
  },
  created() {

  },
  mounted() {

  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  methods: {
    async getInfo(id) {
      const res = await storePackageDetail(id);
      if (res.code == 200) {
        const { storePackageName, type } = res.data;
        const values = {
          storePackageName,
          type: type ? parseInt(type) : 0,
        };
        this.importType = type == 1;
        // 条件筛选
        if (type == 0) {
          const {
            provincesIsThe,
            customerIsThe,
            areaIsThe,
            brandIsThe,
            storePackageBrand,
            storeMinistry,
            isOulet,
            saveAreaDTOList,
            saveCustomerDTOList,
            saveProvincesDTOList,
            isTm
          } = res.data;
          values.isTm = Number(isTm)

          // 品牌筛选
          if (storePackageBrand != "") {
            values.storePackageBrand = {
              selectValue: storePackageBrand.split(",").map((item) => Number(item)),
              selectType: Number(brandIsThe),
            };
          }
          if (saveAreaDTOList.length > 0) {
            values.saveAreaDTOList = {
              selectValue: saveAreaDTOList.map((item) => Number(item.areaId)),
              selectType: Number(areaIsThe),
            };
          }
          if (saveCustomerDTOList.length > 0) {
            values.saveCustomerDTOList = {
              selectValue: saveCustomerDTOList.map((item) => Number(item.customerId)),
              selectType: Number(customerIsThe),
            };
          }
          if (saveProvincesDTOList) {
            console.log(saveProvincesDTOList);
            values.address = {
              selectType: Number(provincesIsThe),
              selectValue: saveProvincesDTOList.map((item) => {
                console.log(item);
                const { provinceId, cityId, districtId } = item;
                return districtId
                  ? `${provinceId}-${cityId}-${districtId}`
                  : cityId
                    ? `${provinceId}-${cityId}`
                    : provinceId;
              }),
            };
          }
          if (isOulet != "") {
            values.isOulet = Number(isOulet);
          }
          if (storeMinistry != "") {
            values.storeMinistry = storeMinistry;
          }
        } else {
          const { storeGroupCode } = res.data;
          values.storeGroupCode = storeGroupCode;
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(values);
          console.log(values);
        });
      }
      console.log(res);
    },


    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values);
        }
      });
    },
    async submit(values) {
      // this.loading = true;
      console.log(values, this.userInfo)
      const {id:createNameId,realname:createName} = this.userInfo
      const params = Object.assign(values,{createNameId,createName})
      const res = await addChannel(params)
      const { message, msg, code, data }= res
      if(code == 200){
        this.showModal = true
        this.launchObj = data
      }else{
        this.$message.error(msg || message)
      }
    },
    back(){
      this.$router.push('/marketingCenter/otherTools/channelLink/list')
    }

  },
};
</script>

<style scoped>

</style>
